import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Image, Typography, Carousel } from 'antd';
import styles from './Welcome.less';

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
// import styles from './index.less';

// 增加以下代码以使用"自动轮播"功能
import SwiperCore, { Autoplay, Pagination, Navigation, EffectFade } from 'swiper';
SwiperCore.use([Autoplay, Pagination, Navigation, EffectFade]);

const Welcome: React.FC = () => {
  // const intl = useIntl();

  return (
    <>
      <div className={styles.head}>
        <Swiper
          spaceBetween={20}
          slidesPerView={1}
          loop
          // 自动播放
          autoplay={true}
          // 翻页
          pagination={{
            clickable: true,
          }}
          navigation={true}
          // 淡入淡出
          effect={'fade'}
          fadeEffect={{
            crossFade: true,
          }}
        >
          <SwiperSlide>
            <img className={styles.item} src={'/zjban.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'/lake.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'https://www.ky.zstu.edu.cn/images/xxgkk.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'https://www.ky.zstu.edu.cn/images/tz.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'/zjban.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'/lake.jpg'} />
          </SwiperSlide>
          <SwiperSlide>
            <img className={styles.item} src={'/zjban.jpg'} />
          </SwiperSlide>
        </Swiper>
      </div>

      <div className={styles.section}>
        <p className={styles.whyTitle}>为什么选择我们</p>
        <p className={styles.whyDes}>
          xx学院是1999年由xx学院创办，并经xx省人民政府批准成立的全日制本科独立学院，于2000年8月列入xx省高等学校招生计划开始招生。
          <p>
            学院现有在校生近九千人。结合区域经济发展对人才的需求，母体良好的学科基础、师资条件和教学资源设置学科专业，现有30个本科专业，涵盖了理、工、艺、经、管、法、文等七大学科门类。形成了以纺织、服装、艺术设计为特色，多学科协调发展的本科专业总体布局与结构。其中，电子信息工程、工商管理、产品设计、动画为省一流专业建设点，电子信息工程、产品设计、人力资源管理为“十二五”省新兴特色专业，电子信息工程为“十三五”省特色专业，艺术与设计为省级重点建设专业，计算机科学与技术、设计学两个学科成功为省一流学科B类，艺术与设计实验教学中心为省高等学校实验教学示范中心。
          </p>
        </p>
      </div>
      <div className={styles.welfare}>
        <p className={styles.welfareTitle}>校园生活</p>
        <div className={styles.welfareContent}>
          <div className={styles.welfareItem}>
            <p className={styles.welfareItemTitle}>文化生活</p>
            <p className={styles.welfareItemDes}>
              书声琅琅、乐声悠扬，丰富多彩的文化生活从科艺启航，校园设有图书馆、校史馆、训练馆、田径场、学生活动中心楼、艺术楼、报告厅、行政楼、教学楼、实验楼、科学楼、钟楼、公寓楼等文化场所，为教师和学生的业余生活提供了多样的选择。
            </p>
          </div>
          <div className={styles.welfareItem}>
            <p className={styles.welfareItemTitle}>生活服务</p>
            <p className={styles.welfareItemDes}>
              在食、住、教、医等方面，校园中设有科艺师生方便前往的食堂、宾馆、图书馆与校医院，各项生活设施优质便利，真正实现了“不出校园，生活尽享”的科艺生活。
            </p>
          </div>
          <div className={styles.welfareItem}>
            <p className={styles.welfareItemTitle}>便民服务</p>
            <p className={styles.welfareItemDes}>
              除了满足师生基本的生活与文化需求，各项便民服务也在校园里陆续设立。
            </p>
          </div>
          <div className={styles.welfareItem}>
            <p className={styles.welfareItemTitle}>交通服务</p>
            <p className={styles.welfareItemDes}>
              校园里的学院班车往来不断，上下班的教师都能乘坐学院班车通勤。学生们也可以乘坐校门口站点的公交车前往各地。
            </p>
          </div>
        </div>
      </div>
    </>

    // <div className='container'>
    //   <Carousel effect="scrollx" autoplay>
    //     <div>
    //       <img className={styles.contentStyle} width={'100%'} src="/zjban.jpg" />
    //     </div>
    //     <div>
    //       <img className={styles.contentStyle} width={'100%'} src="/lake.jpg" />
    //     </div>
    //     <div>
    //       <img className={styles.contentStyle} width={'100%'} src="/zjban.jpg" />
    //     </div>
    //     <div>
    //       <img className={styles.contentStyle} width={'100%'} src="/lake.jpg" />
    //     </div>
    //   </Carousel>
    // </div>
    // <PageContainer>
    //   <Card>
    //     <Alert
    //       message={intl.formatMessage({
    //         id: 'pages.welcome.alertMessage',
    //         defaultMessage: 'Faster and stronger heavy-duty components have been released.',
    //       })}
    //       type="success"
    //       showIcon
    //       banner
    //       style={{
    //         margin: -12,
    //         marginBottom: 24,
    //       }}
    //     />
    //     <Typography.Text strong>
    //       <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
    //       <a
    //         href="https://procomponents.ant.design/components/table"
    //         rel="noopener noreferrer"
    //         target="__blank"
    //       >
    //         <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
    //       </a>
    //     </Typography.Text>
    //     <CodePreview>yarn add @ant-design/pro-table</CodePreview>
    //     <Typography.Text
    //       strong
    //       style={{
    //         marginBottom: 12,
    //       }}
    //     >
    //       <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
    //       <a
    //         href="https://procomponents.ant.design/components/layout"
    //         rel="noopener noreferrer"
    //         target="__blank"
    //       >
    //         <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
    //       </a>
    //     </Typography.Text>
    //     <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
    //   </Card>
    // </PageContainer>
  );
};

export default Welcome;
